<template>
    <div>

        <div class="bank">
            <div>姓名:</div>
            <input
                class="i-body"
                v-model="name"
                placeholder="请输入真实姓名"
            />
        </div>
        <div class="line"></div>
        <div class="bank cell">
            <div>证件类型:</div>
            <div>身份证</div>
        </div>
        <div class="line"></div>
        <div class="bank">
            <div>证件号:</div>
            <input
                class="i-body"
                v-model.trim="hID"
                placeholder="请输入证件号"
            />
        </div>
        <div class="btn-db">
            <button-normal
                widthPro="200"
                heightPro="35"
                :textBtn="textBtn"
                color="#fff"
                size="14"
                @click.native="sure"
            ></button-normal>
        </div>
    </div>
</template>

<script>
import API from '../../request/api';
import { Toast } from 'vant';
import regular from '@/common/regular';
import buttonNormal from '../../components/common/buttonNormal';
import { commonMixin } from '@/common/mixin';

export default {
    /**
     * 实名认证
     * */
    data() {
        return {
            bank: '',
            bankId: '', // 英航卡id
            name: '',
            cardId: '',
            hID: '',
            phone: '',
            stateCard: true, // 银行卡号状态
            textBtn: '确认信息'
        };
    },
    computed: {},
    mixins: [commonMixin],
    watch: {
        // 监听具体数据变化，并做相应的处理
    },
    components: { buttonNormal },
    methods: {
        getBankId() {
            this.request.get(API.bankName, { card: this.cardId }).then(res => {
                this.bank = res.bankinfo.bank;
                this.bankId = res.bankinfo.id;
                this.stateCard = true;
            }, (res) => {
                console.log(res);
                this.stateCard = false;
            });
        },
        sure() {
            if (this.name === '') {
                Toast('请填写姓名');
            } else if (this.hID === '' || !regular.REGEX_IDENTITY.test(this.hID)) {
                Toast('请填写正确身份证号');
            } else {
                this.showGlobaLoading();
                let data = {
                    name: this.name,  // 名字
                    id_number: this.hID, // 身份证号
                };
                this.request.post(API.addBank, data).then(res => {
                    this.hideGlobaLoading();
                    // this.$router.push('code');
                    this.$router.back();
                }, (res) => {
                    this.hideGlobaLoading();
                    // console.log(res);
                });

            }
        }
    },
    beforeCreate() {
        // 可以在这加个loading事件，在加载实例时触发
        // 这个阶段实例的data、methods是读不到的
    },
    created() {
        // 初始化数据，如在这结束loading事件，异步ajax请求也适宜在这里调用
        // 实例创建后：这个阶段已经完成了数据观测(data observer)，属性和方法的运算， watch/event 事件回调。
        // mount挂载阶段还没开始，"el" 属性目前不可见，数据并没有在DOM元素上进行渲染
    },
    beforeMount() {
        // 相关的 render 函数首次被调用。
    },
    mounted() {
        // 挂载元素，获取到DOM节点
        // el选项的DOM节点 被新创建的 vm的el 替换，并挂载到实例上去之后调用此生命周期函数。此时实例的数据在DOM节点上进行渲染
    },
    beforeUpdate() {
        // 数据更新时调用，但不进行DOM重新渲染，在数据更新时DOM没渲染前可以在这个生命函数里进行状态处理
    },
    updated() {
        //  如果对数据统一处理，在这里写上相应函数
        // 这个状态下数据更新并且DOM重新渲染，当这个生命周期函数被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。当实例每次进行数据更新时updated都会执行
    },
    beforeDestroy() {
        // 可以做一个确认停止事件的确认框
    },
    destroyed() {
        // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
    }
};

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~assets/main.styl';

.bank {
    display: flex;
    background-color: grayF;
    height: vw(50);
    align-items: center;
    padding: 0 cellPadding;
    font-size: word14;

    input {
        text-align: right;
    }

    .i-body {
        margin-left: smallMargin;
        flex: 1;
    }

    .ID {
        color: gray9;
    }

    &.cell {
        flex-x(space-between);
    }
}

.line {
    line();
}

.tips {
    height: vw(30);
    line-height: vw(30);
    padding: 0 cellPadding;
    font-size: word12;
    color: gray9;
}

.btn-db {
    position: fixed;
    background: white;
    width: 100vw;
    bottom: 0;
}

@media (max-height: 400px) {
    .btn-db {
        display: none;
    }
}
</style>
